<template>
  <div id="goods" v-if="info">
    <div class="nav">
      <van-nav-bar :title="info.info.name" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in info.gallery" :key="item.id">
          <img :src="item.img_url" alt class="swiper-img" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="provide">
      <div class="provide-cont">
        <div class="cont-detail">
          <span class="circle">□</span>30天无忧退货
        </div>
        <div class="cont-detail">
          <span class="circle">□</span>48小时快速退款
        </div>
        <div class="cont-detail">
          <span class="circle">□</span>满88元包邮费
        </div>
      </div>
    </div>

    <div class="good-info">
      <div class="van-ellipsis info-title">{{info.info.name}}</div>
      <div class="van-ellipsis info-desc">{{info.info.goods_brief}}</div>
      <div class="van-ellipsis info-price">￥ {{info.info.retail_price}}</div>
    </div>

    <div class="choose">
      <van-cell is-link title="请选择规格数量" @click="show = true" />
      <van-popup
        v-model="show"
        round
        position="bottom"
        :style="{ height: '40%' }"
        closeable
        close-icon="close"
      >
        <div class="content">
          <div class="cont-h">
            <img :src="info.info.list_pic_url" class="small" />
            <div class="cont-r">
              <p class="cont-price">价格： ￥{{info.info.retail_price}}</p>
              <p class="cont-desc">请选择数量</p>
            </div>
          </div>
          <div class="cont-f">
            <div class="cont-f-title">数量</div>
            <van-stepper v-model="value" min="1" :max="info.info.goods_number" integer />
          </div>
        </div>
      </van-popup>
    </div>

    <ul class="good-data">
      <li class="data-title">商品参数</li>
      <li class="data-para" v-for="infos in info.attribute" :key="infos.id">
        <span class="para-name">{{infos.name}}</span>
        <div class="van-ellipsis para-desc">{{infos.value}}</div>
      </li>
    </ul>

    <div class="images">
      <div class="images-cont" v-html="info.info.goods_desc"></div>
    </div>

    <div class="issue">
      <div class="issue-title">
        <span class="line">—————</span> 常见问题
        <span class="line">—————</span>
      </div>
      <div class="q-a" v-for="item in info.issue" :key="item.id">
        <p class="question">
          <span class="dot">●</span>
          {{item.question}}
        </p>
        <p class="answer">{{item.answer}}</p>
      </div>
    </div>

    <div class="list-show">
      <div class="list-title">
        <span class="line">—————</span> 大家都在看
        <span class="line">—————</span>
      </div>
      <ul class="list-cont">
        <li class="list-item" v-for="item in info.productList" :key="item.id">
          <img :src="item.list_pic_url" />
          <p class="item-name">{{item.name}}</p>
          <p class="item-price">￥ {{item.retail_price}}</p>
        </li>
        <li class="last"></li>
      </ul>
    </div>

    <div class="footer">
      <van-goods-action>
        <van-goods-action-icon
          icon="star"
          text="收藏"
          color="#7c7c7c"
          v-if="!save"
          @click="saveGood(info.info.id)"
        />
        <van-goods-action-icon
          icon="star"
          text="已收藏"
          color="#ff5000"
          v-else
          @click="saveGood(info.info.id)"
        />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="toCart" />
        <van-goods-action-button type="warning" text="加入购物车" @click="toAddCart(info.info.id)" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import { goodsDetailaction, addCart } from "@/api/goods";
import { addCollect } from "@/api/mine/collect";
export default {
  data() {
    return {
      info: "",
      show: false,
      save: '',
      value: 1,
      collect: [],
    };
  },
  created() {
    goodsDetailaction({
      id: this.$route.query.id,
      openId: localStorage.getItem("openId"),
    }).then((res) => {
      this.info = res;
      this.save = res.collected;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    saveGood(val) {
      this.save = !this.save;
      addCollect({
        goodsId: val,
        openId: localStorage.getItem("openId"),
      });
    },
    toAddCart(val) {
      addCart({
        goodsId: val,
        number: this.value,
        openId: localStorage.getItem("openId"),
      }).then((res) => {});
    },
    toCart() {
      this.$router.push({ path: "/cart" });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  img {
    width: 375px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  p {
    margin: 0;
    padding: 0;
    border: 0;
  }
}
#goods {
  background-color: rgb(244, 244, 244);
  height: 100%;
  overflow: auto;
}
.nav {
  position: fixed;
  width: 375px;
  top: 0;
  left: 0;
  z-index: 99;
}

.swiper {
  width: 375px;
  margin-top: 45px;
  .swiper-img {
    width: 375px;
    height: 375px;
  }
}

.provide {
  width: 375px;
  .provide-cont {
    width: 359px;
    margin: 12px 8px 30px;
    display: flex;
    justify-content: space-between;
    .cont-detail {
      height: 12px;
      font-size: 12px;
      .circle {
        color: rgb(180, 40, 45);
      }
    }
  }
}

.good-info {
  width: 375px;
  height: 154px;
  background-color: #fff;
  border-bottom: 1px solid rgb(153, 153, 153);
  .info-title {
    margin-bottom: 32px;
    padding-top: 12px;
    font-size: 20px;
    width: 375px;
    text-align: center;
  }
  .info-desc {
    font-size: 12px;
    color: rgb(153, 153, 153);
    width: 375px;
    text-align: center;
    margin-bottom: 17px;
  }
  .info-price {
    font-size: 17px;
    color: rgb(180, 40, 45);
    width: 375px;
    height: 38px;
    text-align: center;
    padding-bottom: 20px;
    box-sizing: border-box;
  }
}

.choose {
  width: 375px;
  margin-bottom: 14px;
  .content {
    width: 375px;
    padding: 17px;
    box-sizing: border-box;
    z-index: 99;
    .cont-h {
      height: 90px;
      display: flex;
      .small {
        width: 88px;
        height: 88px;
        margin-right: 17px;
      }
      .cont-r {
        width: 241px;
        .cont-price {
          margin-top: 22px;
          margin-bottom: 17px;
          color: rgb(180, 40, 45);
        }
      }
    }
    .cont-f {
      width: 345px;
      .cont-f-title {
        margin: 17px 0;
      }
    }
  }
}

.good-data {
  width: 375px;
  padding: 12px 16px;
  box-sizing: border-box;
  background-color: #fff;
  .data-title {
    width: 343px;
    height: 45px;
    line-height: 45px;
    font-size: 18px;
  }
  .data-para {
    width: 325px;
    height: 36px;
    margin: 12px 0 12px 8px;
    display: flex;
    background-color: rgb(247, 247, 247);
    .para-name {
      width: 67px;
      line-height: 36px;
      display: block;
      color: rgb(167, 167, 167);
    }
    .para-desc {
      width: 258px;
      line-height: 36px;
      height: 36px;
    }
  }
}

// .images-cont >>> img,p,span {
//   width: 375px;
//   margin: 0;
// }

.issue {
  width: 375px;
  background-color: #fff;
  .issue-title {
    width: 375px;
    height: 50px;
    padding: 19px;
    box-sizing: border-box;
    text-align: center;
    .line {
      margin: 0 4px;
      color: rgb(167, 167, 167);
    }
  }
  .q-a {
    width: 375px;
    padding: 0 16px 12px;
    box-sizing: border-box;
    .question {
      height: 23px;
      font-size: 13px;
      span {
        color: rgb(180, 40, 45);
      }
    }
    .answer {
      width: 333px;
      padding-left: 10px;
      box-sizing: border-box;
      color: rgb(167, 167, 167);
    }
  }
}

.list-show {
  width: 375px;
  padding-top: 15px;
  margin-bottom: 50px;
  .list-title {
    width: 375px;
    height: 50px;
    padding: 19px;
    box-sizing: border-box;
    text-align: center;
    background-color: #fff;
    .line {
      margin: 0 4px;
      color: rgb(167, 167, 167);
    }
  }
  .list-cont {
    width: 375px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    .list-item {
      width: 180px;
      height: 220px;
      padding: 0 15px;
      margin-bottom: 5px;
      background-color: #fff;
      box-sizing: border-box;
      img {
        width: 150px;
        height: 150px;
      }
      .item-name {
        width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 10px;
        font-size: 12px;
      }
      .item-price {
        width: 150px;
        color: rgb(165, 50, 50);
        font-size: 12px;
      }
    }
    .last {
      width: 180px;
      height: 0;
      padding: 0;
      margin: 0;
    }
  }
}
.footer {
  width: 375px;
  position: fixed;
  left: 0;
  bottom: 45px;
  z-index: 9999;
}
</style>